<template>
  <div id="menu-bar">
    <div>
      <b-button v-b-modal.sig variant="btn btn-outline-primary btn-lg btn-block">单人</b-button>
      <b-modal id="sig" title="添加单人" hide-footer>
        <b-form>
          <b-form-group id="input-name" label="姓名" label-for="name">
            <b-form-input id="name" v-model="sig_name" required placeholder="请输入姓名"></b-form-input>
          </b-form-group>

          <b-form-group id="input-money" label="礼金" label-for="money">
            <b-form-input id="money" v-model="sig_money" required placeholder="请输入礼金"></b-form-input>
          </b-form-group>

          <b-form-group id="input-address" label="地址:" label-for="address">
            <b-form-input
              id="address"
              v-model="sig_address"
              :options="address"
              placeholder="请输入地址"
              required
            ></b-form-input>
          </b-form-group>

          <b-button type="submit" variant="primary" id="sig_submit" @click="add_sig">确定</b-button>
          <b-button type="reset" variant="danger" id="sig_reset">重置</b-button>
        </b-form>
      </b-modal>
    </div>

    <div>
      <b-button v-b-modal.mul variant="btn btn-outline-primary btn-lg btn-block">多人</b-button>
      <b-modal id="mul" title="添加多人" hide-footer scrollable>
        <b-form>
          <b-form-group id="input-master-name" label="主家姓名" label-for="usermaster-usernamename">
            <b-form-input id="master-name" v-model="mul_master_name" required placeholder="请输入主家姓名"></b-form-input>
          </b-form-group>

          <b-form-group id="input-master-money" label="主家礼金" label-for="master-money">
            <b-form-input id="master-money" v-model="mul_master_money" required placeholder="请输入主家礼金"></b-form-input>
          </b-form-group>

          <b-form-group id="input-master-address" label="主家地址" label-for="master-address">
            <b-form-input
              id="master-address"
              v-model="mul_master_address"
              :options="address"
              placeholder="请输入主家地址"
              required
            ></b-form-input>
          </b-form-group>

          <b-button type="submit" variant="primary">确定</b-button>
          <b-button type="reset" variant="danger">重置</b-button>

          <hr />
          <!-- <b-table hover :items="items"></b-table> -->
        </b-form>

        <b-container>
          <div>
            <b-button v-b-modal.add_mul_one variant="btn btn-outline-primary btn-lg btn-block">添加</b-button>
            <b-modal id="add_mul_one" title="添加" hide-footer>
              <b-form>
                <b-form-group id="mul-one-input-name" label="姓名" label-for="mul_name">
                  <b-form-input
                    id="mul_name"
                    v-model="mul_name"
                    required
                    placeholder="请输入姓名"
                  ></b-form-input>
                </b-form-group>

                <b-form-group id="mul-one-input-money" label="礼金" label-for="mul_money">
                  <b-form-input
                    id="mul_money"
                    v-model="mul_money"
                    required
                    placeholder="请输入礼金"
                  ></b-form-input>
                </b-form-group>

                <b-form-group id="input-address" label="地址:" label-for="mul_address">
                  <b-form-input
                    id="mul_address"
                    v-model="mul_address"
                    :options="address"
                    placeholder="请输入地址"
                    required
                  ></b-form-input>
                </b-form-group>

                <b-button type="submit" variant="primary" id="mul_submit">确定</b-button>
                <b-button type="reset" variant="danger" id="mul_reset">重置</b-button>
              </b-form>
            </b-modal>
          </div>

          <b-table
            sticky-header
            no-border-collapse
            bordered
            hover
            :items="items"
            :fields="fields"
            responsive="sm"
          >
            <template v-slot:cell(action)="row">
              <b-button size="sm" variant="danger">删除</b-button>
            </template>
          </b-table>
        </b-container>

        <b-button>提交</b-button>
        <b-button>取消</b-button>
      </b-modal>
    </div>
  </div>
</template>

<script>
import VSelect from "@alfsnd/vue-bootstrap-select";
export default {
  name: "MenuBar",
  data() {
    return {
      sig_name: "",
      sig_money: 0,
      sig_address: "",

      mul_master_name: '',
      mul_master_money: 0,
      mul_master_address: '',
      mul_name: '',
      mul_money: 0,
      mul_address: '',

      address: ["马达", "唐宝", "拉玛", "鼎旺"],
      show: true,
      items: [
        {
          index: 1,
          name: "王二小",
          money: 100,
          address: "马达商赛",
          datetime: "2019-10-28 17:39:39"
        }
      ],

      fields: [
        { key: "index", label: "序列", sortable: true },
        { key: "name", label: "姓名", sortable: true },
        { key: "money", label: "礼金", sortable: true },
        { key: "address", label: "地址", sortable: true },
        { key: "datetime", label: "时间" },
        { key: "action", label: "操作" }
      ]
    };
  },

  components: {
    VSelect
  },

  methods: {
    getFormatDate: function() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();
      return currentDate;
    },

    add_sig: function() {
      item = {
        index: this.items.length + 1,
        name: this.sig_name,
        money: this.sig_money,
        address: this.sig_address,
        datetime: getFormatDate()
      };
      this.items.push(item);
    }
  }
};
</script>

<style>
</style>